<template>
    <!-- 商品部分的根视图 -->
    <view class="">
        <!-- 商品图片，使用 :src 绑定 item.img 来显示商品图片 -->
        <image class="good-img" :src="item.img" mode=""></image>
    </view>
    <view class="good">
        <!-- 商品名称 -->
        <text class="good-title">{{item.name}}</text><br>
        <!-- 价钱部分 -->
        <view class="good-price">
            <!-- 显示打折后的价格 -->
            <text class="good-price1">抱团费：￥{{Math.floor(item.price*0.7)}}</text>
            <!-- 显示原价 -->
            <text class="good-price2">￥{{item.price}}</text>
            <!-- 显示活动优惠信息 -->
            <text class="error"> 活动优惠 7折</text>
        </view>
        <!-- 显示用户到商品位置的距离 -->
        <view class="kilometer">您到这里有<span class="kilometer_span">{{dis}}</span>公里</view>
        <!-- 去往商品位置的按钮，点击触发 goto 方法 -->
        <button type="button" class="goto-button" @tap="goto">去这里</button>
        <!-- 浏览区域，包含月销、收藏、浏览数据 -->
        <view class="good-static">
            <text class="good-static-text">月销：{{Math.floor(Math.random()*10000)}}</text>
            <text class="good-static-text">收藏：{{Math.floor(Math.random()*10000)}}</text>
            <text class="good-static-text">浏览：{{Math.floor(Math.random()*10000)}}</text>
        </view>
    </view>
    <view class="good-intro-box">
        <!-- 商品介绍的标题 -->
        <text class="good-intro-title">介绍</text><br>
        <!-- 商品介绍的内容 -->
        <text class="good-intro">{{item.intro}}</text>
    </view>
    <!-- 评价部分 -->
    <uni-section title="评价(103) &nbsp;&nbsp;&nbsp;&nbsp; 好评率98.5%" type="line" titleFontSize="18px" padding />
    <view class="comment-box">
        <!-- 使用 v-for 遍历 pinlun 数组，为每个元素创建一个评价项 -->
        <view class="comment" v-for="(item,index) in pinlun">
            <!-- 评价用户的头像 -->
            <image class="comment-avatar" :src="item.img" mode=""></image>
            <view class="comment-right">
                <!-- 评价用户的名称 -->
                <text class="comment-name">{{item.username}}</text>
                <!-- 评价的内容 -->
                <text class="comment-content">{{item.intro}}</text>
                <!-- 评价的时间 -->
                <text class="comment-date">时间:{{item.createdAt}}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
    // 从 Vue 导入 ref 和 computed 函数
    import { ref, computed } from 'vue'
    // 从 uni-app 导入 onLoad 函数
    import { onLoad } from '@dcloudio/uni-app'
    // 导入自定义的配置文件
    import { CONFIG } from '../../utils/config.js'
    // 导入用户状态库
    import { userStore } from '../../store/userStore';
    // 导入计算经纬度距离的工具函数
    import { getMapDistance } from "@/utils/tools.js"
    // 创建用户状态存储实例
    let store = userStore()
    // 计算用户到商品的距离，使用 getMapDistance 函数
    let dis = computed(() => getMapDistance(store.currentPos.longitude, store.currentPos.latitude,
        item.value.lon, item.value.lat))
    // 存储商品信息的响应式对象
    let item = ref({})
    // 在页面加载时调用函数
    onLoad((data) => {
        getItemByid(data.id)
        getpinlun()
    })
    // 根据传入的 id 获取商品详情的异步函数
    async function getItemByid(id) {
        // 构造请求数据
        let data = {
            "objectId": id
        }
        // 对请求数据进行编码
        let ed = encodeURI(JSON.stringify(data))
        // 发起 GET 请求获取商品信息
        let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
        item.value = res.results[0]
        console.log(item.value)
        // 设置导航栏标题为商品名称
        uni.setNavigationBarTitle({
            title: item.value.name
        })
        // 输出当前位置和商品的经纬度信息
        console.log(store.currentPos)
        console.log(item.value.lat, item.value.lon)
    }
    // 存储评论信息的响应式数组
    let pinlun = ref([])
    // 获取评论信息的异步函数
    async function getpinlun() {
        // 发起 GET 请求获取评论信息
        let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/pinglunqu")
        pinlun.value = res.results
        console.log(pinlun.value)
    }
    // 跳转到商品位置页面的函数
    function goto() {
        uni.navigateTo({
            url: `/pages/mywebView/mywebView?lat=${item.value.lat}&lon=${item.value.lon}&name=${item.value.name}&type=2`
        })
    }
</script>


<style lang="scss">
 .good-img {
        width: 100%;
        height: 400px;
        display: block;
        margin: auto;
    }
 .good {
        width: 100%;
        height: 100%;
     .good-price {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 15px 0;
         .good-price1 {
                color: orange;
                font-size: 16px;
            }
         .good-price2 {
                color: #c3c3c3;
                text-decoration-line: line-through;
                font-size: 14px;
                margin: 0 10px;
            }
         .error {
                color: white;
                border: 1px solid red;
                border-radius: 5px;
                background-color: red;
            }
        }
     .good-static {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
         .good-static-text {
                color: #c3c3c3;
                font-size: 12px;
            }
        }
    }
 .kilometer {
        width: 100%;
        font-size: 18px;
        font-weight: bold;
        border: 1px solid grey;
        border-radius: 10px;
        background-color: #c3c3c3;
    }
 .kilometer_span {
        border: 1px solid orange;
        border-radius: 10px;
        background-color: orange;
        color: red;
    }
 .good-intro-box {
        margin-top: 20px;
        height: 100%;
    }
 .good-title {
        font-size: 28px;
        color: black;
    }
 .good-intro-title {
        height: 100%;
        font-size: 45rpx;
        color: #fa436a;
    }
 .good-intro {
        margin-top: 20px;
        margin-left: 15px;
        font-size: 30rpx;
        color: #909399;
    }
    // 评价部分
 .comment-box {
        border: 1px solid gray;
     .comment {
            display: flex;
            flex-direction: row;
            margin: 15px 0;
         .comment-avatar {
                width: 50px;
                height: 60px;
                border-radius: 50px;
                margin-right: 15px
            }
         .comment-right {
                flex-direction: column;
                justify-content: space-between;
             .comment-name {
                    font-weight: bold;
                }
             .comment-content {
                    margin: 5px 0;
                    font-size: 12px;
                    color: grey;
                    text-indent: 1em;
                    overflow: hidden;
                    /* 设定行数 */
                    -webkit-line-clamp: 5;
                    /* 超出字符转换为........... */
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                }
             .comment-date {
                    color: #c9c9c9;
                    font-size: 12px
                }
            }
        }
    }
</style>